<template >
	<view :class="['popBox',animation?'ani':'']"  v-if="showPoup" :style="{'top':top+'px'}">
		<scroll-view class="areaBox"  scroll-y="true" :style="{height:scHeight+'px'}"  @touchmove.stop>
			<view class="screeenBox">
				<view class="rowBox">
					<text class="title">店铺类型</text>
					<view class="rowCnt">
						<text  :class="[shopType==1?'active':'']" @tap="changeShop(1)">机构</text>
						<text :class="[shopType==2?'active':'']" @tap="changeShop(2)" >个人</text>
					</view>
				</view>
				<view class="rowBox">
					<text class="title">协议退</text>
					<view class="rowCnt">
						<text :class="[percent==2?'active':'']" @tap="changePercent(2)">100%</text>
						<text :class="[percent==3?'active':'']" @tap="changePercent(3)">90%</text>
						<text :class="[percent==4?'active':'']" @tap="changePercent(4)">80%</text>
						<text :class="[percent==5?'active':'']" @tap="changePercent(5)">70%</text>
						<text :class="[percent==6?'active':'']" @tap="changePercent(6)">60%</text>
					</view>
				</view>
				<view class="rowBox">
					<text class="title">适合年龄</text>
					<view class="rowCnt">
						<text v-for="(item,index) in ageArr" :class="[item.isSelect?'active':'']" :key="index" @tap="changeAge(index)">{{item.label}}</text>
					</view>
				</view>
				<view class="rowBox">
					<text class="title">价格</text>
					<view class="rowCnt priceCnt">
						<input placeholder="最低价" type="number" v-model="lower" />
						<text>至</text>
						<input placeholder="最高价" type="number" v-model="highest" />
					</view>
				</view>
				<view class="btnBox">
					<button @tap="reset">重置</button>
					<button @tap="shure">确定</button>
				</view>
			</view>
			
		</scroll-view>
		
	</view>
</template>


<script>
	export default {
		name: 'screenPopup',
		props: {
			show: {
				type: Boolean,
				default: true
			},
			scHeight:{
				type:Number,
				default:0
			},
			isFiexd:{
				type:Boolean,
				default:false
			}
			
		},
		data() {
			return {
				showPoup:false,
				animation:false,
				top:uni.getSystemInfoSync().statusBarHeight,
				shopType:null,		//店铺类型
				percent:null,		//百分比
				lower:'',			//最低价
				highest:'',		//最高价
				ageArr:[{
					label:'0-3',
					isSelect:false,
					value:3
				},{
					label:'4-6',
					isSelect:false,
					value:6
				},{
					label:'7-12',
					isSelect:false,
					value:12
				},{
					label:'13-15',
					isSelect:false,
					value:15
				},{
					label:'16-18',
					isSelect:false,
					value:18
				},{
					label:'19-24',
					isSelect:false,
					value:24
				},{
					label:'25-29',
					isSelect:false,
					value:29
				},{
					label:'30-39',
					isSelect:false,
					value:39
				},{
					label:'40-49',
					isSelect:false,
					value:49
				},{
					label:'50+',
					isSelect:false,
					value:50
				}]
			}
		},
		methods: {
			clear() {},
			open() {
				uni.hideTabBar({});			//隐藏底部tabbar
				this.showPoup = true;
				this.$emit('change', {
					show: true
				})
				setTimeout(()=>{
					this.animation=true
				},30)
				
				
			},
			close() {
				this.animation=false;
				setTimeout(()=>{
					uni.showTabBar({})			//显示底部tabbar
					this.showPoup = false
					this.$emit('change', {
						show: false
					})
				},300)
			},
			// 选择店铺类型
			changeShop(e){
				if(this.shopType==null){
					this.shopType=parseInt(e);
				}else if(this.shopType==parseInt(e)){
					this.shopType=null
				}else{
					this.shopType=parseInt(e);
				}
			},
			
			// 切换退款比例
			changePercent(e){
				if(this.percent==null){
					this.percent=parseInt(e);
				}else if(this.percent==parseInt(e)){
					this.percent=null
				}else{
					this.percent=parseInt(e);
				}
			},
			// 选择年龄段
			changeAge(e){
				if(this.ageArr[e].isSelect){
					this.ageArr[e].isSelect=false;
				}else{
					this.ageArr.forEach((x,i)=>{
						this.ageArr[i].isSelect=false;
					})
					this.ageArr[e].isSelect=true;
				}
			},
			// 重置
			reset(){
				this.shopType=null;
				this.percent=null;
				this.lower='';
				this.highest='';
				this.ageArr.forEach((x,i)=>{
					this.ageArr[i].isSelect=false;
				})
			},
			shure(){
				let _price1=parseFloat(this.lower);
				let _price2=parseFloat(this.highest);
				if(_price2<_price1){
					uni.showToast({
						title: '最高价不能小于最低价',
						icon: 'none'
					});
				}else{
					let _data={};
					if(this.shopType!=null){
						_data.type=this.shopType
					}
					if(this.percent!=null){
						_data.percent=this.percent
					}
					let _age;
					let hasAge=this.ageArr.some((x,i)=>{
						_age=i;
						return x.isSelect
					})
					if(hasAge){
						_data.age=this.ageArr[_age].value
					}
					if(this.lower){
						_data.price1 =this.lower
					}
					if(this.highest){
						_data.price2=this.highest
					}
					uni.$emit("changeScreen2",_data)
					this.close()
				}
				
			}
		},
		created(){
			
		},
		
		
	}
</script>
<style lang="less">
	@import "../../common/public.less";
	
	.popBox{
		position: fixed;
		top: var(--status-bar-height);
		left: 0;
		width: 100%;
		height: 0%;
		background-color: rgba(0,0,0,0.5);
		padding-top: 168upx;
		z-index: 980;
		display: flex;
		overflow: hidden;
		transition: all 0.3s; 
		
		text{
			display: block;
			width: 100%;
			font-size: 32upx;
			color: #333333;
			line-height: 70upx;
			border-left: 2upx solid rgba(0,0,0,0);
			border-bottom: 1px solid #efefef;
			padding-left: 20upx;
		}
		
		.areaBox{
			width: 100%;
			background-color: #FFFFFF;
			display: flex;
			flex-direction: column;
			border-top: 1px solid #EFEFEF;
			
		}
		.squareBox{
			width:70%;
			background-color: #FFFFFF;
			display: flex;
			flex-direction: column;
			border-top: 1px solid #EFEFEF;
			padding-left: 20upx;
		}
	}
	.ani {
		height: 100%;
		
	}
	.aniDely {
		height: 100%;
		transition-property: all ;
		transition-duration: 1s;
		transition-timing-function: linear;
		transition-delay: 0.3s;
	}
	.screeenBox{
		display: flex;
		flex-direction: column;
		.btnBox{
			margin-top: 20upx;
			height: 120upx;
			display: flex;
			align-items: center;
			padding: 0 36upx;
			justify-content: space-around;
			border-top: 1px solid #EEEEEE;
			button{
				height: 80upx;
				border-radius: 40upx;
				line-height: 76upx;
				border: none;
				outline: none;
				margin: 0;
				font-size: 32upx;
				width: 40%;
				border: 2upx solid #CCCCCC;
				box-sizing: border-box;
				background-color: rgba(0,0,0,0);
			}
			button:after{
				border: none;
				outline: none;
			}
			button:last-child{
				background-color: #ffcd11;
				color: #FFFFFF;
				border: 2upx solid #ffcd11;
			}
		}
		.rowBox{
			display: flex;
			flex-direction: column;
			padding: 10upx 36upx;
			.title{
				font-size: 32upx;
				font-weight: bold;
				border: none;
				padding: 0;
				margin-bottom: 10upx;
			}
			.rowCnt{
				display: flex;
				justify-content: flex-start;
				
				flex-wrap: wrap;
				text{
					font-size: 28upx;
					height: 40upx;
					width: 110upx;
					line-height: 40upx;
					background-color: #eeeeee;
					color: #222222;
					border-radius: 20upx;
					text-align: center;
					padding: 0;
					margin-right: 20upx;
					margin-bottom: 20upx;
				}
				.active{
					background-color: #ffcd11;
				}
				text:last-child{
					margin-right: 0;
				}
			}
			.priceCnt{
				flex-wrap: nowrap;
				align-items: center;
				input{
					background-color: #EEEEEE;
					height: 48upx;
					line-height: 48upx;
					width: 30%;
					font-size: 28upx;
					border-radius: 24upx;
					border: none;
					text-align: center;
				}
				text{
					padding: 0;
					background-color: rgba(0,0,0,0);
					margin: 0;
					border: none;
				}
			}
		}
	}
</style>
